<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: brand
  Date: 2023/9/28
  Time: 14:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>添加管理员</title>
    <link rel="stylesheet" href="/static/css/form.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4042237_hxpfhzx0l36.css">
</head>
<body>
<form action="" class="hh-form">
    <div class="form-item">
        <label class="hh-label">商品品牌名称：</label><input type="text" class="hh-input hh-input-big" name="brandName" required>
    </div>
    <div class="form-item">
        <label class="hh-label">所属分类：</label>
        <select class="hh-input hh-input-big" name="productTypeId">
            <c:forEach items="${list}" var="two">
                <option value="${two.id}" >${two.name}</option>
            </c:forEach>
        </select>
    </div>
    <div class="form-item">
        <label class="hh-label">品牌logo：</label>
        <input type="file" class="hh-upload">
        <div class="hh-upload-item">
            <img>
            <i class="iconfont icon-shangchuan"></i>
            <input type="hidden" name="brandImg" id="img">
        </div>
    </div>
    <div class="form-item">
        <label class="hh-label"></label>
        <input type="submit" class="hh-bt hh-bt-primary submit" value="提交">
        <input type="button" class="hh-bt hh-bt-warning close" value="关闭">
    </div>
</form>
<script src="/static/js/jquery/jquery-3.7.1.min.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script>
    //上传框被点击时
    $(".hh-upload-item").click(function () {
        $(".hh-upload").click();
    })

    $(".hh-upload").change(function () {
        let files = $(".hh-upload").prop("files");
        let formData = new FormData();
        formData.append("file", files[0]);
        $.ajax({
            url: '/file/upload',                             //请求地址
            type: 'post',                               //请求方法
            data: formData,
            processData: false,                         //阻止序列化表单（key=value）
            contentType: false,                         //设置内容类型为非普通表单内容
            dataType: 'json',
            success: function (e) {
                $("#img").val(e.message);
                $(".hh-upload-item>i").hide();
                $(".hh-upload-item>img").attr("src", "/file/show?name="+e.message);
                $(".hh-upload-item>img").show();
            }
        })
    })

    //提交
    $("form").submit(function () {
        let data = $('form').serialize();
        $.post('/brand/add', data, function (e) {
            console.log(e)
            if(e.result){
                //成功提示
                parent.layer.msg(e.message, {icon: 1});
                //关闭弹窗
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
                //刷新列表
                $(".right-body", parent.document).load("/brand/page");
            }else{
                layer.msg(e.message, {icon: 2});
            }
        })

        return false;
    })

    //关闭按钮
    $(".close").click(function () {
        console.log(333)
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    })
</script>
</body>
</html>
